<template>
  <div>
    <t-model-dlg ref="modelDlg" @tmodel-ok="tmodelChanged"></t-model-dlg>
    <alarm-condition-dlg ref="alarmConditionDlg"></alarm-condition-dlg>
    <expression-dlg ref="expressionDlg"></expression-dlg>
   
    <a-table
      size="small"
      :data-source="alarmList"
      :columns="columns"
      :row-key="
        (r) => {
          return r.identifier;
        }
      "
    >
      <template slot="operation" slot-scope="text, record">
        <a-button @click="editModalAlarm(record)">物模型</a-button>
        <a-button :disabled="true">站点</a-button>
        <a-dropdown>
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="editLocalAlarm(record)">
              <a-icon
                type="menu-fold"
                
              />简单条件
            </a-menu-item>
            <a-menu-item key="2" @click="editComplexExpression(record)">
              <a-icon type="customer-service" />自定义条件
            </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px"
            >本设备<a-icon type="down" />
          </a-button>
        </a-dropdown>
      </template>
    </a-table>
  </div>
</template>
<script>
import TModelDlg from "@/components/cfg/TModelDlg.vue";
import AlarmConditionDlg from "./AlarmConditionDlg.vue";

const columns = [
  {
    title: "名称",
    dataIndex: "name",
    width: 100,
    key: "name",
  },
  {
    title: "ID",
    dataIndex: "identifier",
    key: "identifier",
    width: 50,
    ellipsis: true,
  },
  {
    title: "模板配置",
    dataIndex: "model_cfg",
    key: "model_cfg",
    ellipsis: true,
  },
  /*
  {
    title: "站点配置",
    dataIndex: "station_cfg",
    key: "station_cfg",
    ellipsis: true,
  },*/
  {
    title: "设备配置",
    dataIndex: "dev_cfg",
    key: "dev_cfg",
    ellipsis: true,
  },
  {
    title: "告警配置",
    dataIndex: "operation",
    width: 300,
    scopedSlots: { customRender: "operation" },
  },
];
import { getDevRule, saveDevRule, refreshDevRule } from "@/services/rule";
import ExpressionDlg from './ExpressionDlg.vue';
export default {
  components: { TModelDlg, AlarmConditionDlg, ExpressionDlg },
  data() {
    return {
      columns,
      currentCfg: null,
    };
  },
  props: ["alarmList", "tmodel", "tid"],
  methods: {
    handleMenuClick(e,record){
      console.log("********&&&&&&&&&&&&",e,record)
    },
    editLocalAlarm(record) {
      //console.log("&&&&&&&&&&&&&", record);
      this.currentCfg = record;
      let self = this;
      if (record) {
        if (this.tid) {
          getDevRule(this.tid, record.identifier).then((expressions) => {
            console.log("-------------expre", expressions);
            self.$refs.alarmConditionDlg.Show(
              self,
              self.saveCondition,
              self.tmodel,
              []
            );
          });
        }
      }
    },
    editComplexExpression(record){
      this.currentCfg = record
      getDevRule(this.tid, record.identifier).then((expression) => {
        this.$refs.expressionDlg.expression = expression
        this.$refs.expressionDlg.Show(this,this.saveCondition)
      })
      

    },
    saveCondition(self, expression) {
      console.log("**************", expression, self.currentCfg);
      if (self && self.currentCfg && expression) {
        console.log("%%%%%%%%%%%%%%%%%", self.currentCfg, expression);
        let rule = { tid: self.currentCfg.identifier, expression: expression };
        return new Promise((re) => {
          saveDevRule(self.tid, rule).then(() => {
            self.$emit("refresh-alarms");
            re();
          });
        });

        //self.currentCfg.
      }
      return new Promise((re, rej) => {
        rej("表达式错误");
      });
    },
    editModalAlarm() {
      this.$refs.modelDlg.Show(this.tmodel, "event");
    },
    tmodelChanged() {
      this.$emit("on-modal-changed");
    },
  },
};
</script>